import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { EnvView } from '$router';
import Touchable from '$yo-component/touchable';
import yoHistory from '$common/history';
import './index.scss';
import 'element-theme-default';

class Footer extends Component {
    render() {
        return (
            <footer className="yo-footer">
                <ul className="yo-tab yo-tab-view">
                    <Touchable
                        touchClass="touchable-highlight"
                        onTap={()=> {
                            yoHistory.push('/');
                        }}>
                        <li className="item item-y-ico">
                        {/* <li className="item item-y-ico item-on"> 颜色改变 */}
                            <i className= "yo-ico"></i>首页
                            {/* <i className= {this.props.icon ? 'yo-ico item-on' : 'yo-ico'}></i>首页 */}
                        </li>
                    </Touchable>

                    <Touchable
                        touchClass="touchable-highlight"
                        onTap={()=> {
                            yoHistory.push('/skill');
                        }}>
                        <li className="item item-y-ico">
                            {/* <i className="el-icon-edit yo-ico"></i>技能 */}
                            <i className="el-icon-edit yo-ico"></i>技能
                        </li>
                    </Touchable>

                    <Touchable
                        touchClass="touchable-highlight"
                        onTap={()=> {
                            yoHistory.push('/project');
                        }}>
                        <li className="item item-y-ico">
                            {/* <i className="yo-ico"></i>项目 */}
                            <i className="el-icon-date yo-ico"></i>项目
                        </li>
                    </Touchable>

                    <Touchable
                        touchClass="touchable-highlight"
                        onTap={()=> {
                            yoHistory.push('/experience');
                        }}>
                        <li className="item item-y-ico">
                            {/* <i className="yo-ico"></i>经历 */}
                            <i className="el-icon-menu yo-ico"></i>经历
                        </li>
                    </Touchable>

                    <Touchable
                        touchClass="touchable-highlight"
                        onTap={()=> {
                            yoHistory.push('/my');
                        }}>
                        <li className="item item-y-ico">
                            {/* <i className="yo-ico"></i>我的 */}
                            <i className="el-icon-star-on yo-ico"></i>我的
                        </li>
                    </Touchable>
                </ul>

            </footer>
        )
    }
}

export default Footer;
